<template>
    <cfgEditTable
        :value="value"
        :columns="statusColumns"
        :addTpl="propertiesObject.tpl()"
        @change="change"
    >
        <template slot-scope="{ row, index }" slot="custom1" >
        <fieldCell v-model="value[index].type" class="dyEle" @change="change"
            :config="{type: 'select', transfer: true, options: getStatusOptions(row, index)}"/>
        </template>
    </cfgEditTable>
</template>

<script>
let statusTypeOptionsAll = []
for (let i=0; i<15; i++) {
  statusTypeOptionsAll.push({label: `st${i}`, value: `st${i}`,})
}
export default {
    name: 'cfg-modelStatusProperty',
    components: {},
    data() {
        return {
            propertiesObject: this.$modelObject.getClass('statusProperties')
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            default() {
                return {}
            }
        },
    },
    methods: {
        getStatusOptions(row, index) {
            let status = this.value || []
            let res = []
            let _statusTypeOptionsAll = this.tools.lodash.cloneDeep(statusTypeOptionsAll)
            
            _statusTypeOptionsAll.forEach(item => {
                let _index = status.findIndex(vItem => vItem.type === item.value)
                res.push({
                ...item,
                disabled: _index !== -1 && _index !== index
                })
            })
            return res
        },
        change(){
            console.log("file: cfg-modelStatusProperty.vue:55  change  this.value:", this.value)
            this.$emit('change', this.value)
        }
    },
    computed: {
        statusColumns() {
        return [
            {
                key: 'type',
                title: this.lang.type,
                slot: 'slotCustom1',
            },
            {
                key: 'name',
                title: this.lang.name,
                elementName: 'fieldCell',
                props: { config: { type: 'text', clearable: true } }
            },
            {
                key: 'defaultValue',
                title: this.lang.defaultValue,
                elementName: 'fieldCell',
                props: { config: { type: 'text', clearable: true } }
            },
            {
                key: 'comments',
                title: this.lang.comments,
                elementName: 'fieldCell',
                props: { config: { type: 'text', clearable: true } }
            },
            { slot: 'operation', }
        ]
        },
        lang() {
            return {
                "en-US": {
                    name: 'name',
                    type: 'type',
                    defaultValue: 'defaultValue',
                    comments: 'comments',
                    sameName: 'same name',
                    typeUnequal: 'Same name, but different type',
                },
                "zh-CN": {
                    name: '名称',
                    type: '类型',
                    defaultValue: '默认值',
                    comments: '备注',
                    sameName: '名称相同',
                    typeUnequal: '名称相同, 但是类型不同',
                },
            }[this.G_Locale];
        },
    }
}
</script>

<style scoped lang="less">
.content {
    padding: 6px 0;
    background-color: #fff;
    .ivu-collapse-header {
        display: flex;
        align-items: center;
    }
    /deep/ .ivu-collapse-header {
        display: flex;
        align-items: center;
    }
}
.tips {
    margin-left: 30px;
    line-height: 30px;
    color: red;
}
// 列表相关
.header {
    background-color: #f7f7f7;
    .col-cell {
        line-height: 40px;
        border: none;
        border-radius: 0;
    }
}
.col-item {
    margin: 6px 0;
    .option {
        flex: 0 0 60px;
        padding-left: 6px;
        border: none;
        text-align: left;
        .ivu-btn + .ivu-poptip {
            margin-left: 8px;
        }
    }
    .num {
        line-height: 32px;
        flex: 0 0 50px;
        text-align: center;
        background-color: #f7f7f7;
    }
    &.error {
        .num {
            border: 1px solid red;
        }
    }
}
.col-cell {
    flex: 1;
    text-align: center;
    // border: 1px solid #dcdee2;
    border-radius: 4px;
    margin: 0;
    + .col-cell {
        margin-left: 6px;
    }
}
</style>
